.grid {
	display: grid;
	grid-gap: 0.5em;
	justify-content: center;
	margin: 0 auto;
	--grid-column-count: 2;
	--thumbnail-size: 12.5rem;

	@media screen and (min-width: 460px) and (max-width: 619px) {
		--grid-column-count: 3;
	}

	@media screen and (min-width: 620px) and (max-width: 1148px) {
		--grid-column-count: 4;
	}

	@media screen and (min-width: 1149px) and (max-width: 1400px) {
		--grid-column-count: 6;
	}

	@media screen and (min-width: 1401px) {
		--thumbnail-size: 13rem;
		--grid-column-count: 7;
	}
	--column-width: calc(var(--thumbnail-size) + 0.75rem);
	--grid-columns: repeat(auto-fill, minmax(var(--column-width), 1fr));

	grid-template-columns: var(--grid-columns);
}

.grid-container {
	margin-block-start: 0;
	margin-block-end: 1.5em;
	margin-inline: auto;
}
